<template class="mypage">
    <view class="canvasbg">
        <div class="bgred" ></div>
        <div class="fmDe">
            <canvas
                :style="styless"
                key="1"
                disable-scroll="true"
                @touchstart="touchLineA"
                @touchmove="moveLineA"
                @touchend="touchEndLineA"
                canvas-id="canvasLineb"
                id="canvasLineb"
                class="charts1"
            />
            <canvas
                key="2"
                disable-scroll="true"
                @touchstart="touchLineA"
                @touchmove="moveLineA"
                @touchend="touchEndLineA"
                canvas-id="canvasLineA"
                id="canvasLineA"
                class="charts"
                :style="styless"
            />
        </div>
    </view>
</template>
<script>
import uCharts from "../../components/u-charts/u-charts.js";
var canvaLineA = null;
var canvaLineb = null;
var that;
export default {
    data() {
        return {
            styless: "",
            id: "",
            historylist: null,
            cWidth: "",
            cWidth2: "",
            cHeight: "",
            cHeight2: "",
            pixelRatio: 1,
            status: "",
            monitorData: {}, // 获取到的数据
            currentDataTd: null, // 胎心
            currentDataTx: null, // 胎心
            currentDataGs: null, // 宫缩

            currentDataTd1: null, // 胎心
            currentDataTx1: null, // 胎心
            currentDataGs1: null, // 宫缩

            currentDataTd2: null, // 胎心
            currentDataTx2: null, // 胎心
            currentDataGs2: null, // 宫缩

            computedWidth: null, // 横坐标
        };
    },
    onLoad(option) {
        that=this
        var _this = this;
        if (option.id) {
            _this.id = option.id;
            _this.getList();
            var { windowWidth, windowHeight } = uni.getSystemInfoSync();
            this.styless = "height:" + windowHeight + "px";
            this.cWidth = uni.upx2px(450);
            this.cWidth2 = uni.upx2px(300);
            this.cHeight = windowHeight;
            this.cHeight2 = windowHeight;
        }
        var _self = this;
        //#ifdef MP-ALIPAY
        uni.getSystemInfo({
            success: function (res) {
                if (res.pixelRatio > 1) {
                    //正常这里给2就行，如果pixelRatio=3性能会降低一点
                    //_self.pixelRatio =res.pixelRatio;
                    _self.pixelRatio = 2;
                }
            },
        });
        const { windowWidth, windowHeight } = uni.getSystemInfoSync();
        // this.styless
        //#endif
    },
    methods: {
        showLineA(canvasId) {
            var _this = this;
            var frodata = [];

            for (var i = 110; i < 171; i++) {
                if (i % 2 == 0) {
                    var itm = {
                        value: i,
                        lineColor: "#ffe8f5",
                    };
                    frodata.push(itm);
                }
            }
            canvaLineA = new uCharts({
                $this: that,
                canvasId: canvasId,
                type: "line",
                fontSize: 11,
                legend: { show: false },
                dataLabel: false,
                rotate: true, //横屏
                dataPointShape: false,
                background: "#FFFFFF",
                pixelRatio: _this.pixelRatio,
                categories: _this.currentDataTx2,
                series: [
                    {
                        type: "line",
                        color: "#8D8D8D",
                        data: _this.currentDataTx1,
                    },
                ],
                // animation: true,
                enableScroll: true, //开启图表拖拽功能
                xAxis: {
                    disableGrid: true,
                    type: "grid",
                    gridType: "solid",
                    gridColor: "#FFC0D9",
                    itemCount: 2 * 3 * 60,
                    labelCount: 2,
                    scrollShow: true,
                    scrollAlign: "left",
                    scrollBackgroundColor: "#F7F7FF",
                    scrollColor: "#DEE7F7",
                    axisLineColor: "#FFC0D9",
                    format: (val) => {
                        return val.toFixed(0) + "min";
                    },
                },
                yAxis: {
                    gridType: "solid",
                    gridColor: "#FFC0D9",
                    splitNumber: 10,
                    dashLength: 8,
                    data: [
                        {
                            axisLineColor: "#FFC0D9",
                            gridType: "solid",
                            gridColor: "#FFC0D9",
                            min: 60,
                            max: 210,
                            format: (val) => {
                                return val;
                            },
                        },
                    ],
                },
                width: _this.cWidth * _this.pixelRatio,
                height: _this.cHeight * _this.pixelRatio,
                enableMarkLine: true,
                // extra: {
                    // line: {
                    //     width: "1px",
                    //     style: "straight",
                    // },
                    // markLine: {
                    //     type: "solid",
                    //     data: [
                    //         {
                    //             showLabel:true,
                    //             value:110,
                    //             lineColor: "#ffe8f5",
                    //         },
                    //         {
                    //             showLabel:true,
                    //             value: 170,
                    //             lineColor: "#ffe8f5",
                    //         },
                    //     ]
                    // },
                // },
                // extra: {
                //     area: {
                //         type:'straight',
                //         opacity: "0.6",
                //         daaLine:true,
                //         width:1
                //     },
                // },
            });
        },
        showLineb(canvasId) {
            var _this = this;
            canvaLineb = new uCharts({
                $this: that,
                canvasId: canvasId,
                type: "mix",
                fontSize: 11,
                legend: { show: false },
                dataLabel: false,
                rotate: true, //横屏
                dataPointShape: false,
                background: "#FFFFFF",
                pixelRatio: _this.pixelRatio,
                categories: _this.currentDataTx2,
                series: [
                    {
                        type: "line",
                        color: "#8D8D8D",
                        data: _this.currentDataTd1,
                    },
                    {
                        type: "line",
                        color: "#8D8D8D",
                        data: _this.currentDataGs1,
                    },
                ],
                // animation: true,
                enableScroll: true, //开启图表拖拽功能
                xAxis: {
                    disabled: true,
                    disableGrid: true,
                    type: "grid",
                    gridType: "solid",
                    gridColor: "#FFC0D9",
                    itemCount: 2 * 3 * 60,
                    labelCount: 2,
                    scrollShow: false,
                    scrollAlign: "left",
                    scrollBackgroundColor: "#F7F7FF",
                    scrollColor: "#DEE7F7",
                    axisLineColor: "#FFC0D9",
                    scrollBackgroundCo: "#FFFFFF",
                    scrollColor: "#FFFFFF",
                },
                yAxis: {
                    gridType: "solid",
                    gridColor: "#FFC0D9",
                    splitNumber: 5,
                    dashLength: 8,
                    data: [
                        {
                            axisLineColor: "#FFC0D9",
                            gridType: "solid",
                            gridColor: "#FFC0D9",
                            min: 0,
                            max: 100,
                        },
                    ],
                },
                width: _this.cWidth2 * _this.pixelRatio,
                height: _this.cHeight2 * _this.pixelRatio,
                extra: {
                    line: {
                        width: "2px",
                        style: "straight",
                    },
                },
            });
        },
        touchLineA(e) {
            canvaLineA.scrollStart(e);
            canvaLineb.scrollStart(e);
        },
        moveLineA(e) {
            canvaLineA.scroll(e);
            canvaLineb.scroll(e);
        },
        touchEndLineA(e) {
            canvaLineA.scrollEnd(e);
            canvaLineb.scrollEnd(e);
        },

        gettime(milliSecond) {
            return this.geuti(milliSecond / 1000);
        },
        getList() {
            var _this = this;
            var data = {
                id: _this.id,
            };
            // 【移动端】获取用户监测历史详情（胎监，胎心）
            _this.$ajaxs
                .get("/mobile/v1/monitor/getMonitorDetails", data)
                .then((res) => {
                    if (res.status == 200) {
                        _this.historylist = res.content;
                        _this.historylist.beginTime = _this.getFormat(
                            _this.historylist.beginTime
                        );
                        // fmFlag: 胎动     fhr1: 胎心率    toco: 宫缩曲线  tocoFlag: 宫缩复位  time: 检测时间
                        var tableList;
                        tableList = JSON.parse(
                            _this.historylist.dataMap.propertys[0].children[1]
                                .value
                        ); // 全部数据
                        var tableLists =tableList.filter((item,index) => (index % 2===0)||(item.fmFlag));
                        var tableList =tableLists.filter((item,index) => (index % 2===0)||(item.fmFlag));
                        if (tableList) {
                            var taixin = [];
                            var gongsuo = [];
                            var taidong = [];
                            for (var i = 0; i < tableList.length; i++) {
                                var taixinItm = [];
                                var gongsuoItm = [];
                                var time =
                                    (tableList[i].time - tableList[0].time) /
                                    1000 /
                                    60;
                                if (
                                    tableList[i].fhr1 <= 60 ||
                                    tableList[i].fhr1 >= 210
                                ) {
                                    tableList[i].fhr1 = null;
                                }
                                if (tableList[i].toco <= 0) {
                                    tableList[i].toco = null;
                                }
                                taixinItm.push(time, tableList[i].fhr1);
                                gongsuoItm.push(time, tableList[i].toco);
                                taixin.push(taixinItm);
                                gongsuo.push(gongsuoItm);
                                if (tableList[i].fmFlag) {
                                    taidong.push(80);
                                } else {
                                    taidong.push(null);
                                }
                            }
                            var fitx = _this.filterdata(taixin);
                            var currentDataTx1 = [];
                            var currentDataTx2 = [];
                            var currentDataGs1 = [];
                            var currentDataGs2 = [];
                            for (var i = 0; i < fitx.length; i++) {
                                var itme = fitx[i];
                                currentDataTx1.push(itme[1]);
                                currentDataTx2.push(itme[0].toFixed(0) + "min");
                                currentDataGs1.push(gongsuo[i][1]);
                            }
                            _this.currentDataTd1 = taidong;
                            _this.currentDataTx1 = currentDataTx1;
                            _this.currentDataTx2 = currentDataTx2;
                            _this.currentDataGs1 = currentDataGs1; //宫缩
                        }
                        _this.computedWidth = Math.ceil(
                            (tableList[tableList.length - 1].time -
                                tableList[0].time) /
                                1000 /
                                60
                        );
                        // _this.currentDataTx2 = timsss;
                        _this.showLineA("canvasLineA");
                        _this.showLineb("canvasLineb");
                    } else {
                        uni.showToast({
                            title: "请检查网络~",
                            icon: "none",
                        });
                    }
                })
                .catch((err) => reject(err));
        },
        filterdata(data) {
            // console.log(data,'ori')
            var arr = [];
            for (var i = 0; i < data.length; i++) {
                if (i < data.length - 1) {
                    if (Math.abs(data[i][1] - data[i + 1][1]) > 30) {
                        var time =
                            Math.abs(data[i][0] - data[i + 1][0]) > 1
                                ? data[i][0] - 0 + 1
                                : data[i][0];
                        if (time == data[i][0]) {
                            arr.push([time, null]);
                        } else {
                            arr.push(data[i], [time, null]);
                        }
                    } else {
                        arr.push(data[i]);
                    }
                }
            }
            arr.push(data[data.length - 1]);
            // console.log(arr,'final')

            return arr;
        },
        getFormat(time) {
            // 时间戳转换
            if (time) {
                var data = new Date(time - 0);
                var y = data.getFullYear();
                var m =
                    data.getMonth() + 1 >= 10
                        ? data.getMonth() + 1
                        : "0" + (data.getMonth() + 1);
                var d =
                    data.getDate() > 10 ? data.getDate() : "0" + data.getDate();
                var h =
                    data.getHours() >= 10
                        ? data.getHours()
                        : "0" + data.getHours();
                var f =
                    data.getMinutes() >= 10
                        ? data.getMinutes()
                        : "0" + data.getMinutes();
                var s =
                    data.getSeconds() >= 10
                        ? data.getSeconds()
                        : "0" + data.getSeconds();
                return y + "-" + m + "-" + d + "  " + h + ":" + f + ":" + s;
            }
        },
    },
};
</script>
<style scoped lang="scss">
.canvasbg {
    position: relative;
    .bgred {
        position: absolute;
        height: 100%;
        top: 0;
        right: 120upx;
        width: 152upx;
        background: rgba(250, 77, 177, 0.17);
    }
}
.fmDe {
    background: #fff;
    color: #333;
    display: flex;

    .charts {
        width: 450upx;
    }
    .charts1 {
        width: 300upx;
    }
}
</style>